{{ define "stats.html" }}
</head>
<script src="/fs/public/js/stats.js"></script>
<script src="/fs/public/js/weight-chart.js"></script>
<link rel="stylesheet" type="text/css" href="/fs/public/css/index.css" />
<body>
    <div class="container-lg">
        <br>
        <div class="row">
            <div class="col-md-4">
                <div class="card border-primary">
                    <div class="card-header">Exercise</div>
                <div class="card-body">
                    <div class="chart-container">
                        <form onchange='setStatsPage({{ .ExData.Sets }}, {{ .Config.HeatColor }}, 0, {{ .Config.PageStep }});'>
                            <select class="form-select" id="ex-value">
                                {{ range $gr := .GroupMap }}
                                <option value="{{ $gr }}">{{ $gr }}</option>
                                {{ end }}
                            </select>
                        </form>
                        <br>
                        <table class="table table-borderless">
                            <thead>
                                <th class="col-1"></th>
                                <th class="col-4">Date</th>
                                <th class="col-3">Reps</th>
                                <th class="col-3">Weight</th>
                            </thead>
                            <tbody id="stats-table">
                            </tbody>
                        </table>
                        <div class="gap-3 hstack">
                            <button onclick='setStatsPage({{ .ExData.Sets }}, {{ .Config.HeatColor }}, 1, {{ .Config.PageStep }});' class="m-auto btn del-set-button"><i class="bi bi-arrow-left-square"></i></button>
                            <button onclick='setStatsPage({{ .ExData.Sets }}, {{ .Config.HeatColor }}, -1, {{ .Config.PageStep }});' class="m-auto btn del-set-button"><i class="bi bi-arrow-right-square"></i></button>
                        </div>
                    </div>
                </div>
                </div>
            </div>
            <div class="col-md-8">
                <div class="card border-primary">
                    <div class="card-header">Reps</div>
                    <div class="card-body">
                        <canvas id="stats-reps" style="max-height: 200px;"></canvas>
                    </div>
                </div>
                <br>
                <div class="card border-primary">
                    <div class="card-header">Weight</div>
                    <div class="card-body">
                        <canvas id="stats-weight" style="max-height: 200px;"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
        
<script>
   setStatsPage({{ .ExData.Sets }}, {{ .Config.HeatColor }}, 0, {{ .Config.PageStep }});
</script>

{{ template "footer.html" }}
{{ end }}